<template>
  <div class="wrap">
    <van-tabs @change="tabClick">
      <van-tab
        v-for="(item, index) in menu"
        :key="index"
        :title="item.label"
        :name="index"
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import {ref} from 'vue'
const props=defineProps({
  menu:Array
})
const emit=defineEmits(['input','update:modelValue'])

function tabClick(i){
  emit('update:modelValue',props.menu[i])
}
</script>

<style lang="less" scoped>

.wrap {
  background: @background-color;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  overflow: hidden;
}
.van-tabs {
  width: 100%;
}
/deep/.van-tabs__nav {
  background: @background-color;
}
// 标签栏被选中的样式
/deep/.van-tabs__line{
  width: 0;
}
/deep/.van-tab--active .van-tab__text{
  border: 1px solid @theme-color;
  border-radius: 15px;
  padding: 5px 10px;
  color: @theme-color;
} 
// 标签边距
/deep/.van-tabs__wrap--scrollable .van-tab{
  padding: 0 5px;
}
/deep/.van-tabs__nav--complete{
  padding-left: 0;
}
</style>
